<script setup lang="ts" name="SwitchDark">

import {useSettingsStoreWithOut} from "@/stores/modules/settings";
import {useTheme} from "@/hooks/useTheme";
import {computed} from "vue";
import {Sunny, Moon} from '@element-plus/icons-vue'

const settingsStore = useSettingsStoreWithOut();
const { switchDark } = useTheme();

const themeConfig = computed(()=> settingsStore.themeConfig);

const onAddDarkChange = ()=>{
    switchDark();
}

</script>

<template>

  <ElSwitch v-model="themeConfig.isDark"
            @change="onAddDarkChange"
            inline-prompt
            :active-icon="Sunny"
            :inactive-icon="Moon"

  ></ElSwitch>

</template>

<style scoped lang="scss">

</style>